<template>
  <!-- loading盒子 -->
  <div class="login_box">
    <el-card class="login_center_from" body-style="{padding:'0px'}">
      <!-- form -->
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <!-- logo -->
        <el-row type="flex" justify="center">
          <i class="el-icon-s-platform" style="text-align: center;"></i>
        </el-row>
        <!-- title -->
        <h2 class="login_title" style="margin: 20px;">mall-admin-web</h2>
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="form.password"
            prefix-icon="el-icon-platform-eleme"
            show-password
          ></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="login()">登 录</el-button>

          <el-button type="primary" @click="rest()">重 置</el-button>
        </el-row>
      </el-form>
    </el-card>
    <!-- 布局背景图 -->
    <img
      class="login_center_layout"
      src="../../assets/login_center_bg.5307896.png"
    />
  </div>
</template>
<script>
import { fetchLoginInfo } from '../../api/api'
// import Axios from "axios";
export default {
  data() {
    return {
      //表单属性
      form: {
        username: '',
        password: '',
      },
      //校验规则
      rules: {
        username: [
          { required: true, message: '请输入正确用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能小于三位', trigger: 'blur' },
        ],
      },
      // loading: false, //加载动画
    }
  },
  methods: {
    //登录获取token
    login() {
      // this.loading = true;
      // Axios.post("/admin/login", {
      //   username: this.form.name,
      //   password: this.form.pass,
      // })
      //   .then((res) => {
      //     console.log(res);
      //     if (res.data.code === 200) {
      //       //利用localstorage存储到本地
      //       localStorage.setItem(
      //         "token",
      //         res.data.data.tokenHead + res.data.data.token
      //       );
      //       // console.log(res.data.data.tokenHead + res.data.data.token);
      //       this.loading = false;
      //       this.$router.push("/home").catch(() => {}); //登录验证成功路由实现跳转
      //     } else {
      //       console.log("登录失败");
      //     }
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   });
      var a = 1
      function text() {
        console.log(a)
        setTimeout(function () {
          console.log(a, 'set')
        })
        new Promise((reslove) => {
          console.log(a, 'pro')
          reslove()
          console.log(2)
        }).then(() => {
          console.log(a, 'then')
        })
        var a = 'hello'
        console.log(a)
      }
      text()

      fetchLoginInfo({ data: { ...this.form } })
        .then((res) => {
          console.log(res)
          if (res.code == 200) {
            //利用localstorage存储到本地
            localStorage.setItem('token', res.data.tokenHead + res.data.token)
            // console.log(res.data.data.tokenHead + res.data.data.token);
            this.$router.push('/home').catch(() => {}) //登录验证成功路由实现跳转
          } else {
            console.log('登录失败')
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    //表单重置
    rest() {
      this.$refs.form.resetFields()
    },
  },
}
</script>
<style lang="scss" scoped>
.login_box {
  height: 100vh;
}
.el-card {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
}
.el-card,
.el-message {
  border-radius: 4px;
  overflow: hidden;
}
.login_center_from {
  position: absolute;
  left: 0;
  right: 0;
  width: 360px;
  margin: 140px auto;
  border-top: 10px solid #409eff;
}
.login_center_layout {
  background: #409eff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: 200px;
}
.login_title {
  text-align: center;
  color: #409eff;
}
// 校验成功样式
::v-deep .is-success .el-input__inner {
  border-color: #67c23a !important;
}
</style>
